<script lang="ts" setup>
import { SysTab } from '@/models/sys'

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

const props = withDefaults(
  defineProps<{
    title?: string
    list: { title: string; value: SysTab }[]
    modelValue: SysTab
  }>(),
  {
    title: '',
  },
)

const navStyle = computed(() => {
  const height = 44
  return {
    paddingTop: statusBarHeight + 'px',
    height: statusBarHeight + height + 'px',
  }
})

const boxStyle = computed(() => {
  const height = 44
  return {
    height: height + 'px',
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

function change(item) {
  if (props.modelValue === item.value) return
  emit('update:modelValue', item.value)
  emit('change', item.value)
}
</script>

<template>
  <view class="nav-head">
    <!-- :style="{ paddingTop: statusBarHeight + 'px' }" -->
    <view class="relative">
      <image src="@/static/images/sys/top-bg-color-1.png" class="top-image"></image>
      <!-- <view class="nav-height">{{ title }}</view> -->
      <view class="tabs tabs-head">
        <template v-for="(item, index) in list" :key="item.value">
          <view
            class="tab-view"
            :style="{
              width: `${100 / list.length}%`,
            }"
            :class="item.value === modelValue ? 'text-primary' : ''"
            @click="change(item)"
          >
            {{ item.title }}
          </view>
          <view class="line" v-if="list.length - 1 !== index"></view>
        </template>
      </view>
    </view>
  </view>
  <view class="box-view" :style="boxStyle"></view>
</template>
<style lang="scss" scoped>
.nav-height {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 32rpx;
  font-weight: 500;
  color: #2b2f36;
}

.box-view {
  width: 100%;
  height: 282rpx;
}

.nav-head {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;

  .tabs {
    margin: 0 32rpx;
    margin-top: 15rpx;
    /* position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; */
  }

  .top-image {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 282rpx;
  }
}

.tabs-head {
  position: relative;
  display: flex;
  align-items: center;
  height: 88rpx;
  margin-top: 5rpx;
  // #ifndef MP-WEIXIN
  margin-top: 50px !important;
  //  #endif
  margin-bottom: 5rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(183, 189, 200, 0.1);

  .tab-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33vw;
    height: 100%;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 28rpx;
    font-weight: 400;
    color: #8a909c;
  }

  .line {
    width: 2rpx;
    height: 40rpx;
    background: #ebedf2;
  }
}

.text-primary {
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 28rpx !important;
  font-weight: 800 !important;
  color: #2b2f36 !important;
}
</style>
